<template>
	<view :class="'login-box '+(tableActive==0?'jl':tableActive==1?'cg':tableActive==2?'sj':'')">
		<!-- jl 经理  cg 仓管  sj司机 -->
		<view class="header jl" v-if="tableActive==0">
			<image class="img" src="/static/images/header.png"></image>
		</view>
		<view class="header cg"  v-if="tableActive==1">
			<image class="img" src="/static/images/cgheader.png"></image>
		</view>
		<view class="header sj"  v-if="tableActive==2">
			<image class="img" src="/static/images/sjheader.png"></image>
		</view>
			
		<view class="login">
			 <view class="title">
				 登录
			 </view>
			 
			 <view class="table-box">
				 <!-- tableArr -->
				 <!-- active -->
				 <view :class="'table ' + (tableActive==index?'active':'')"  v-for="(item,index) in tableArr"  :key="index" @tap="table(index)">
				 	{{item}}
				 </view>
				<!-- <view class="table active" @tap="table">
					业务经理
				</view>
				<view class="table"  @tap="table">
					仓库管理员
				</view>
				<view class="table"  @tap="table">
					司机
				</view> -->
				 
			 </view>
			 
			 
			 <view class="input-group">
				 <view :class="'input-box '+(IsFocus&&shadow==0?'shadow':'') ">
					 <image class="iphone" src="/static/images/iphone.png" mode=""></image>
					 <input class="input" type="number" value="" @input="GetIphone" @focus="focus(0)"  @blur="blur(0)" placeholder="请输入您的手机号" placeholder-class="sty" />
				 </view>
				 
				 <view :class="'input-box codeBox '+(IsFocus&&shadow==1?'shadow':'') ">
					 <image class="pass" src="/static/images/password.png" mode=""></image>
					 <input class="code" type="number" value="" @input="GetCode" @focus="focus(1)"  @blur="blur(1)" placeholder="请输入验证码" placeholder-class="sty" />
					<!-- <view  class="btn" @tap="code">
						获取验证码
					 </view> -->
					 <button :class="'btn '+(isDisabled?'bgColor':'') " :disabled="isDisabled" @tap="code">{{buttonText}}</button>
				 </view>
				 
			 </view>
			 
			 <view class="text-box" @tap="check">
				 <image v-if="!checked" class="check" src="/static/images/noChecked.png" mode=""></image>
				 <image v-if="checked" class="check" src="/static/images/checked.png" mode=""></image>
				 <view class="text">
					 我已阅读并同意酒易淘服务端<text @tap.stop="jump">服务协议</text>及<text @tap.stop="jump1">隐私协议</text>
				 </view>
			 </view>
			 
			 <view class="submit" @tap="submit">
				立即登录
			 </view>
			 
			 
		</view>
		
	</view>
</template>

<script>
	const util = require("../../utils/util.js");
	//获取应用实例
	const api = require("../../config/api.js"); 
	export default {
		data() {
			return {
				tableArr:['业务经理','仓库管理员','司机'],
				tableActive:0,
				checked:false,
				second:60,
				buttonText: "获取验证码",
				isDisabled: false,
				IsFocus:false,
				shadow:0,
				iphone:'',
				codeNum:''
			}
		},
		methods: {
			GetIphone(e){
				console.log(e.detail.value)
				this.iphone = e.detail.value
			},
			GetCode(e){
				console.log(e.detail.value)
				this.codeNum = e.detail.value
			},
			focus(index){
				this.IsFocus = true
				this.shadow = index
			},
			blur(index){
				this.IsFocus = false
				this.shadow = index
			},
			table(index){
				// table切换
				this.tableActive = index;
				console.log(this.tableActive)
				uni.setStorageSync('identity',this.tableActive)
			},
			check(){
				// 选中
				this.checked = !this.checked
			},
			jump(){
				
				uni.navigateTo({
					url:'/pages/serviceAgreement/serviceAgreement'
				})
			},
			jump1(){
				
				uni.navigateTo({
					url:'/pages/privacyPolicy/privacyPolicy'
				})
			},
			code(){
				// 获取验证码
				
				var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				
				if (!strTemp.test(this.iphone)) {
				  return uni.showToast({
				    title: '请核对手机号',
				    icon: 'none'
				  });
				}
				this.isDisabled=true
				util.request(api.AuthSmsCodeByType, {
				  phone: this.iphone,
				  operateType: 1,
				  clientType: 1
				}, 'POST').then(res => {
					console.log(res)
				  if (res.errno == 0) {
					  console.log(1111)
					this.second=this.second;
					this.buttonText=this.second + "s"
				    clearInterval(this.timer);
				    this.timer = setInterval(() => {
						this.second--; 
						this.second=this.second;
						this.buttonText=this.second + "s"
						this.isDisabled=true;
				      if (this.second == 0) {
				        clearInterval(this.timer);
				          this.second=60;
				          this.isDisabled=false;
				          this.buttonText="获取验证码";
				        return;
				      }
				    }, 1000);
				  } else {
					  console.log(this)
				    uni.showToast({
				      title: res.errmsg
				    });
					 this.isDisabled = false
				  }
				});
				
			},
			// 登录
			submit(){
				if(!this.iphone){
					uni.showToast({
						title:'请填写手机号',
						icon:'none'
					})
					
					return false;
				}
				
				
				// var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
				
				// if (!strTemp.test(this.iphone)) {
				//   return uni.showToast({
				//     title: '请核对手机号',
				//     icon: 'none'
				//   });
				// }
				
				
				if(!this.codeNum){
					uni.showToast({
						title:'请填写验证码',
						icon:'none'
					})
					return false;
				}
				
				if(!this.checked){
					uni.showToast({
						title:'请同意协议',
						icon:'none'
					})
					return false;
				}
				
				console.log(this.codeNum)
				util.request(api.login, {
				  mobile: this.iphone,
				  smsCode:this.codeNum
				}, 'POST').then(res => {
					console.log(res)
					if(res.error==0){
						
						// 存入token
						uni.setStorageSync('token',res.token)
						// 存入个人数据
						uni.setStorageSync('userInfo',res.data);
						// 是否登录
						uni.setStorageSync('isLogin',true);
						// 存入人员id（0:B端用户 1:C端用户 2:业务员 3:总经理 4:司机 5:仓管）
						uni.setStorageSync('identity',res.data.userType);
						if(uni.getStorageSync('identity')==3){
							uni.redirectTo({
								url:"/pages/generalManager/generalManager"
							})
						}else{ 
							uni.redirectTo({
								url:"/pages/index/index"
							})
						}
						// 把token传给后台接口
						this.deviceToken();
					}else{
						
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				
				})
				// uni.redirectTo({
				// 	url:"/pages/index/index"
				// })
			},
			
			// 向后台传token 
			deviceToken(){
				var cid = uni.getStorageSync('cid');
				util.request(api.deviceToken, {
				  deviceToken: cid,
				}, 'POST').then(res => {
					console.log("token",res)
				})
				
			}
			
		}
	}
</script>

<style>
	@import url("./login.css");
</style>
